<template>
  <view class="container">
    <!-- 会员统计 -->
    <view class="stats-section">
      <view class="stat-item">
        <text class="stat-title">会员总数</text>
        <text class="stat-value">{{ totalMembers }}</text>
      </view>
      <view class="stat-item">
        <text class="stat-title">本周新增会员</text>
        <text class="stat-value">{{ newMembersThisWeek }}</text>
      </view>
      <view class="stat-item">
        <text class="stat-title">本月新增会员</text>
        <text class="stat-value">{{ newMembersThisMonth }}</text>
      </view>
    </view>

    <!-- 商品统计  -->
    <view class="stats-section">
      <view class="stat-item">
        <text class="stat-title">商品总数</text>
        <text class="stat-value">{{ totalProducts }}</text>
      </view>
      <view class="stat-item">
        <text class="stat-title">库存总数</text>
        <text class="stat-value">{{ totalInventory }}</text>
      </view>
      <view class="stat-item">
        <text class="stat-title">库存预警</text>
        <text class="stat-value">{{ inventoryWarning }}</text>
      </view>
    </view>

    <!-- 门店统计 -->
    <view class="stats-section">
      <view class="stat-item">
        <text class="stat-title">门店数量</text>
        <text class="stat-value">{{ totalStores }}</text>
      </view>
      <view class="stat-item">
        <text class="stat-title">新增数量</text>
        <text class="stat-value">{{ newStores }}</text>
      </view>
    </view>

    <!-- 图表统计 -->
    <view class="charts-section">
      <view class="chart-item">
        <h3>销售额前5名商品统计</h3>
        <Echart chartId="salesTopChart" :option="salesTopOption" height="400px" />
      </view>
      <view class="chart-item">
        <h3>订单统计</h3>
        <Echart chartId="ordersChart" :option="ordersOption" height="400px" />
      </view>
    </view>
  </view>
</template>

<script>
import Echart from '@/components/echarts.vue';

export default {
  components: {
    Echart,
  },
  data() {
    return {
      totalMembers: 0,
      newMembersThisWeek: 0,
      newMembersThisMonth: 0,
      totalProducts: 0,
      totalInventory: 0,
      inventoryWarning: 0,
      totalStores: 0,
      newStores: 0,
      salesTopOption: {
        title: {
          text: '销售额前5名商品',
        },
        tooltip: {},
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: '销售额',
            type: 'bar',
            data: [],
          },
        ],
      },
      ordersOption: {
        title: {
          text: '订单统计',
        },
        tooltip: {},
        legend: {
          data: ['今日订单', '本周订单', '本月订单'],
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: '今日订单',
            type: 'bar',
            data: [],
          },
          {
            name: '本周订单',
            type: 'bar',
            data: [],
          },
          {
            name: '本月订单',
            type: 'bar',
            data: [],
          },
        ],
      },
      mainAccountId: '',
      storeId: ''
    };
  },
  methods: {
    async fetchStatistics() {
		
		console.log(this.userInfo);
      try {
        const res = await this.$myRuquest({
          url: '/index/plugin.echarts/getStatistics',
          method: 'GET',
          data: {
            main_account_id: this.mainAccountId,
            store_id: this.storeId
          }
        });
        if (res.data.code === 200) {
          const data = res.data.data;
          this.totalMembers = data.totalMembers;
          this.newMembersThisWeek = data.newMembersThisWeek;
          this.newMembersThisMonth = data.newMembersThisMonth;
          this.totalProducts = data.totalProducts;
          this.totalInventory = data.totalInventory;
          this.inventoryWarning = data.inventoryWarning;
          this.totalStores = data.totalStores;
          this.newStores = data.newStores;

          // 更新销售额前5名商品统计图表
          this.salesTopOption = {
            title: {
              text: '销售额前5名商品',
            },
            tooltip: {},
            xAxis: {
              data: data.salesTop.labels,
            },
            yAxis: {},
            series: [
              {
                name: '销售额',
                type: 'bar',
                data: data.salesTop.data,
              },
            ],
          };

          // 更新订单统计图表
          this.ordersOption = {
            title: {
              text: '订单统计',
            },
            tooltip: {},
            legend: {
              data: ['今日订单', '本周订单', '本月订单'],
            },
            xAxis: {
              data: data.orders.labels,
            },
            yAxis: {},
            series: [
              {
                name: '今日订单',
                type: 'bar',
                data: data.orders.today,
              },
              {
                name: '本周订单',
                type: 'bar',
                data: data.orders.thisWeek,
              },
              {
                name: '本月订单',
                type: 'bar',
                data: data.orders.thisMonth,
              },
            ],
          };
        } else {
          uni.showToast({
            title: res.data.message,
            icon: 'none',
          });
        }
      } catch (error) {
        console.error('Error fetching statistics:', error);
      }
    },
    checkLoginStatus() {
      const token = uni.getStorageSync('token');
      if (token) {
        this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
        this.mainAccountId = this.userInfo.user_id;
        this.storeId = this.userInfo.shop_id;
      } else {
        this.userInfo = {};
        this.$router.push('/pages/login/login');
      }
    }
  },
  mounted() {
    this.checkLoginStatus();
    this.fetchStatistics();
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f5f5f5;
}

.stats-section {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.stat-item {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex: 1;
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stat-title {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.charts-section {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.chart-item {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 10px;
  flex: 1;
}

h3 {
  text-align: center;
  margin-bottom: 20px;
}
</style>
